<template>
  <div class="info-wrap">
    <Title title="更多账号信息" style="font-size:16px; margin:10px 0 16px 0"/>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="moreAccountInfoRules"
      :label-width="labelWidth"
      :label-position="showMobilePage ? 'left' : 'right'"
      class="lineHeight32">
      <el-row :class="{'response-create-row': !dialog, 'flex-wrap': dialog}">
        <el-col v-for="field in fields" :key="field.keyword" :span="rowSpan" :class="{'label-collapse-global': showCollapse(field)}" class="responsive-col-lg-8">
          <el-form-item :label="field.label" :prop="field.keyword">
            <div v-if="field.type === 'number'" class="flex">
              <el-input
                v-model="formData[field.parentKey][field.keyword]"
                :class="{'append-input': field.keyword ==='collection'}"
                class="width240"
                placeholder="请输入"
                oninput="if(value>999999999)value=999999999;if(value<0)value=0;"
                name="fansNum"
                type="number"
                size="small"
                @input="numInputChange($event, field.parentKey,field.keyword)"
                @mousewheel.native.prevent
              >
                <template v-if="field.keyword ==='collection'" slot="suffix">
                  <div>个</div>
                </template>
              </el-input>
              <div v-if="field.keyword ==='collection'" class="tipicon">
                <tipIcon content="单位为个，请填写整数"/>
              </div>
            </div>
            <selectWithoutHttp
              v-else-if="field.type === 'select'"
              v-model="formData[field.parentKey][field.keyword]"
              :list-data="field.options"
              :clearable="field.clearable || false"
              class="width240"
              style="margin-right: 10px;"
              placeholder="请选择"
            />
            <el-input
              v-else-if="field.type === 'input'"
              v-model="formData[field.parentKey][field.keyword]"
              :maxlength="field.maxlength || 500"
              :clearable="field.clearable || false"
              type="text"
              size="small"
              class="width240"
              placeholder="请输入"
            />
            <three-level-area
              v-else-if="field.type === 'area'"
              :selected-options="formatArea(formData[field.parentKey][field.keyword])"
              class="height32"
              clearable
              separator="-"
              select-type="city"
              placeholder="省-市"
              @update:options="threeLevelArea($event)" />
          </el-form-item>
        </el-col>
        <!-- 动态字段 -->
        <el-col v-for="(item) in formData.moreAccountInfo.dynamicKey" :key="`${item.name}_${item.id}`" :span="rowSpan" class="responsive-col-lg-8">
          <el-form-item :prop="`${item.name}_${item.id}`" class="dynamicKey-label">
            <el-tooltip slot="label" :content="item.name" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ item.name }}
              </div>
            </el-tooltip>
            <dynamicKey :item="item"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import ThreeLevelArea from '@/components/ThreeLevelArea';
import mixins from './mixins';
import { accountAllField } from '@/views/resource/create/resourceData';
export default {
  components: { selectWithoutHttp, ThreeLevelArea },
  mixins: [mixins],
  model: {
    prop: 'modelData',
    event: 'changeValue'
  },
  props: {
    modelData: {
      type: Object,
      default: () => ({})
    },
    rowSpan: {
      type: Number,
      default: 12
    },
    platformList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    };
  },
  computed: {
    fields() {
      return accountAllField.filter(i => {
        return !i.platformCategory && !i.platform || i.platformCategory && i.platformCategory.includes(this.modelData.platformCategory) || i.platform && i.platform.includes(this.modelData.platformTypeName);
      });
    },
    moreAccountInfoRules() {
      const validateType = (msg, item) => {
        return (rule, value, callback) => {
          if (item || item === 0) {
            callback();
          } else {
            callback(new Error(msg));
          }
        };
      };
      const rules = {};
      const fields = this.fields.filter(j => (!!j.required || j.requiredPlatform && j.requiredPlatform.includes(this.modelData.platformTypeName)));
      fields.forEach(item => {
        rules[item.keyword] = [{ required: true, trigger: item.trigger, validator: validateType(`请${item.trigger === 'blur' ? '输入' : '选择'}${item.label}`, this.formData[item.parentKey][item.keyword]) }];
      });
      return this.isJournalPlatform ? { ...rules, ...this.formRules } : this.formRules;
    }
  },
  methods: {
    numInputChange(text, parentKey, key) {
      const str = text.replace(/^0+(\d)|[^\d]+/g, ''); // 只允许整数
      this.formData[parentKey][key] = str;
    },
    // 选择城市
    threeLevelArea(data) {
      this.$set(this.modelData.additionalKey, 'city', data.join('-'));
    },
    formatArea(data) {
      if (!data) return [];
      if (typeof data === 'string') {
        return data.indexOf('-') > -1 ? data.split('-') : data.split(',');
      } else {
        return data;
      }
    },
    showCollapse(field) {
      return field.labelCollapse && (field.requiredPlatform && field.requiredPlatform.includes(this.formData.platformTypeName) || field.required);
    }
  }
};
</script>
<style lang="scss" scoped>
  .width240 {
    width: 240px;
    ::v-deep {
      .el-select {
        width: 240px;
      }
    }

  }
  .height32 {
    ::v-deep {
      .el-cascader {
        line-height: 32px;
      }
    }
  }
.append-input {
  ::v-deep {
    .el-input__suffix {
      color: #333;
      display: flex;
      align-items: center;
    }
  }
}
.tipicon {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
</style>
